import React, { Component } from 'react'
import axios from "axios"
export class Louceng extends Component {
  state = {
      arr:[],
      changeIndex:0
  }
  componentDidMount(){
      axios.get("/list").then(res=>{
          console.log(res.data)
          this.setState({
              arr:res.data.list
          })
      })
      //  console.dir 打印节点的属性，并以列表的形式展示
      console.dir(this.myref)
  }
  check(index){
    console.log(index)
    this.setState(
        {
            changeIndex:index  
        }
    )
    // 让元素滚动到视口的顶部
    this.myref.children[index].scrollIntoView({behavior:"smooth"})

  }
  render() {
    return (
      <div className='lou-wrap'>
          <div className='left'>
              {
                  this.state.arr&&this.state.arr.length?this.state.arr.map((item,index)=>{
                      return <h3 key={index} onClick={this.check.bind(this,index)} className={index==this.state.changeIndex?"acttive":""}>{item.title}</h3>
                  }):""
              }
          </div>
          <div className='right' ref={(ref)=>{this.myref= ref}}>
          {
                  this.state.arr&&this.state.arr.length?this.state.arr.map((item,index)=>{
                      return <div key={index}>
                           <h3>{item.title}</h3>
                           <div className='children-box'></div>
                      </div>
                  }):""
              }
          </div>
      </div>
    )
  }
}

export default Louceng